<template>
  <div>
    <el-button @click="openDialog">申请</el-button>

    <el-table :data="tableData">
      <el-table-column :align="'center'" label="请假申请记录">
        <el-table-column
          :align="'center'"
          prop="leaveTime"
          label="外出时间"
          width="220"
        />
        <el-table-column
          :align="'center'"
          prop="backTime"
          label="返校时间"
          width="220"
        />
        <el-table-column :align="'center'" prop="travel" label="外出地点" />
        <el-table-column :align="'center'" prop="reason" label="事由类型" />
        <el-table-column label="状态" width="76">
          <template #default="scope">
            <template v-if="scope.row.applyStatus == '0'">
              <el-tooltip effect="dark" content="通过申请" placement="left">
                <el-progress
                  :width="50"
                  :stroke-width="5"
                  type="circle"
                  :percentage="successPercentage"
                  status="success"
                  :indeterminate="true"
                />
              </el-tooltip>
            </template>
            <template v-else-if="scope.row.applyStatus == '1'">
              <el-tooltip effect="dark" content="待审核" placement="left">
                <el-progress
                  :width="50"
                  :stroke-width="5"
                  type="circle"
                  :percentage="warningPercentage"
                  status="warning"
                />
              </el-tooltip>
            </template>
            <template v-else>
              <el-tooltip effect="dark" content="驳回申请" placement="left">
                <el-progress
                  :width="50"
                  :stroke-width="5"
                  type="circle"
                  :percentage="exceptionPercentage"
                  status="exception"
                />
              </el-tooltip>
            </template>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <div class="pagination-block">
      <el-config-provider :locale="local">
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>

    <NoteDialog ref="noteDialog" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
import { getNoteStudent } from '@/api/modules/note'
import { usePagination } from '@/hooks/usePagination'
import NoteDialog from './components/NoteDialog.vue'

// 设置日期语言为中文
const local = zhcn

// ------------------------------ 父子通信 ------------------------------
const noteDialog = ref()
const openDialog = () => {
  noteDialog.value.handleDialogVisible()
}

// ------------------------------ 组合式函数 ------------------------------
// 解构响应式变量
const {
  pageNo,
  pageSize,
  pageSizes,
  pageTotal,
  tableData,
  handleCurrentChange,
  handleSizeChange,
} = usePagination(getNoteStudent)

// ------------------------------ 挂载 ------------------------------
// 初始化
const successPercentage = ref(0)
const warningPercentage = ref(0)
const exceptionPercentage = ref(0)
onMounted(async () => {
  // 审批状态动画
  await setTimeout(() => {
    successPercentage.value = 100
    warningPercentage.value = 66
    exceptionPercentage.value = 33
  }, 500)
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
